<template>
      <div id="box">
      <!--      登录表单-->
          <div id="login_container">
              <h1>欢迎登录</h1>
              <el-form ref="loginForm" label-position="left" label-width="80px" class="login_form" :model="loginForm" :rules="rules">
                  <el-form-item prop="username">
                      <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                      <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="onSubmit">立即登录</el-button>
                      <router-link to="/register">没有账号，立即注册</router-link>
                  </el-form-item>
              </el-form>
          </div>
      </div>
</template>

<script>
export default {
    name: "LoginView",
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    // required  必填项  message: 提示信息  trigger: 校验的触发时机  失去焦点时
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    // min: 最小长度   max 最大长度
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        onSubmit(){
            this.$refs.loginForm.validate((valid) => {
                //  表单校验通过  true   否则 false
                if (valid) {
                    this.$notify.success("认证通过")
                    //  如果跳转页面
                    this.$router.push({name:'index'})
                    //  发送http请求
                } else {
                    this.$notify.warning("请填写必要数据")
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>

#box{
    height: 100vh;
    background-color: rgb(26,160,148);
}

a{
    color: #42b983;
}

#login_container{
    width: 450px;
    height: 380px;
    background-color: #fff;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 15px #fff;
}

h1{
    position: absolute;
    top: 40px;
    left: 150px;
    z-index: 999;
    color: #67C23A;
}

.login_form{

    position: absolute;
    bottom: 40px;
    right: 35px;
    border-bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
}

button{
    width: 100%;
}
</style>